<template>
  <q-card class='flex flex-center'>
    <div id='container' style='height: 500px;width: 100%' />
  </q-card>
</template>

<script lang='ts'>
import { defineComponent, onMounted } from 'vue';

export default defineComponent({
  name: 'Map',
  props: {
    source: {
      type: String,
      required: true
    },
    destination: {
      type: String,
      required: true
    }
  },
  setup(props) {
    let map: AMap.Map;
    AMap.plugin('AMap.Geocoder', Function);
    const Geocoder = new AMap.Geocoder();

    onMounted(() => {
      map = new AMap.Map('container', {
        zoom: 4,
        center: [108.5525, 34.3227]
      });
      Geocoder.getLocation(props.source, function(status, result) {
        const src = (result as AMap.Geocoder.GeocodeResult).geocodes[0].location;
        map.add(new AMap.Marker({
          position: src,
          label: {
            content: '寄件地址',
            direction: 'bottom',
            offset: new AMap.Pixel(0, 5)
          }
        }));

        Geocoder.getLocation(props.destination, function(status, result) {
          const dst = (result as AMap.Geocoder.GeocodeResult).geocodes[0].location;
          map.add(new AMap.Marker({
            position: dst,
            label: {
              content: '收件地址',
              direction: 'bottom',
              offset: new AMap.Pixel(0, 5)
            }
          }));

          map.add(new AMap.Polyline({
            path: [src, dst],
            borderWeight: 2,
            strokeColor: 'blue'
          }));

        });
      });
    });
  }
});
</script>

